<template>
  <div class="result">
    <van-nav-bar :title="$route.query.keywords + ' 标题'" />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        @click="$router.push( { path: '/Article', query: { id: item.art_id } } )"
      />
    </van-list>
  </div>
</template>

<script>
import { searchArticle } from "@/api/article";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      page: 1, //页码数
      list: [],
    };
  },
  methods: {
    async onLoad() {
      // 上拉加载数据
      let res = await searchArticle({
        page: this.page,
        per_page: 10,
        q: this.$route.query.keywords,
      });
    //   console.log(res);

      // 查到结果后让页码+1，这样下次就查询下一页的数据了
      this.page++;
      this.list.push(...res.data.data.results);
      this.loading = false;

      // 如果加载完了就需要把finished变成true
      // 当页面的结果数据大于等于服务器上存的总数据表示加载完了
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true;
      }
    },
  },
};
</script>

<style></style>
